<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>vue 事件处理函数</title>
</head>
<body>
<div id="app">
    <!-- 对于函数没有参数的情况，事件处理函数可以写也可以不写 -->
    <button v-on:click="method1">按钮1</button>
    <button v-on:click="method1()">按钮1</button>

    <hr>

    <!--对于函数有一个参数的情况，但是在事件处理函数中省略了小括号， Vue 会把产生的事件进行传入-->
    <button v-on:click="method2">按钮2</button>
    <!---对于函数有一个参数的情况，但是在事件处理函数中包含小括号，但是没有指定值，函数在使用过程中参数对应的内容为 undefined-->
    <button v-on:click="method2()">按钮2</button>
    <!--正常调用，正常处理-->
    <button v-on:click="method2(123)">按钮2</button>

    <hr>

    <!--对于函数有多个参数的情况，但是在事件处理函数中省略了小括号， Vue 会把产生的事件作为第一个参数进行传入， 其他参数对应的内容为 undefined-->
    <button v-on:click="method3">按钮3</button>
    <!---对于函数有多个参数的情况，但是在事件处理函数中包含小括号，但是没有指定值，函数在使用过程中所有参数对应的内容为 undefined-->
    <button v-on:click="method3()">按钮3</button>
    <!---对于函数有多个参数的情况，但是在事件处理函数中包含小括号，但是传入的参数个数小于定义的参数个数，函数在使用过程中缺失的参数对应的内容为 undefined-->
    <button v-on:click="method3(123)">按钮3</button>


    <hr>

    <!--将事件作为参数手动传入-->
    <button v-on:click="method2">按钮4</button>
    <button v-on:click="method2($event)">按钮4</button>


</div>

<script type="module">
    import {createApp} from "../../../js/vue.esm-browser.js";

    let app = createApp(
        {
            setup() {
                function method1() {
                    console.log("调用了 method1");
                }

                function method2(event) {
                    console.log("调用了 method2");
                    console.log(event);
                }

                function method3(parameter, event) {
                    console.log("调用了 method3");
                    console.log(parameter);
                    console.log(event);
                }

                return {
                    method1,
                    method2,
                    method3,
                }
            }
        }
    );

    app.mount("#app")
</script>
</body>
</html>